<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>健康档案授权</span>
      </div>
      <div class="div">
        <span class="solid" ></span>
      </div>
    </header>
    <div class="content">
      <van-collapse v-model="activeNames" @change="labelChange()">
        <van-collapse-item v-for="(item, index) in list" :key="index" :title="item.dict_name" :name="index">
          <template #title>
            <div class="title">
                 <a  class="hengGang"></a>
              {{item.dict_name}}
            </div>
          </template>
          <div class="divLabel" v-for="(childen, childenIndex) in item.oauths" :key="childenIndex">
            <div style="color: #333;font-size: 15px;">{{childen.title}}</div>
            <div class="selectDiv">
              <span @click.stop="justLook(childen)">
                <img src="../../../assets/方形未选中.png" v-show="childen.oauth_type !== 0  && childen.oauth_type !== 1" class="imgSelect"  alt="">
                <img src="../../../assets/方形选中.png" v-show="childen.oauth_type === 0 || childen.oauth_type === 1" class="imgSelect"  alt="">
              查阅
              </span>
<!--              <span @click.stop="justUpdate(childen)">-->
<!--                <img src="../../../assets/方形未选中.png"  v-show="childen.oauth_type !== 1"  class="imgSelect" alt="">-->
<!--                <img src="../../../assets/方形选中.png" v-show="childen.oauth_type === 1"   class="imgSelect"  alt="">-->
<!--              修改-->
<!--              </span>-->
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="bottom">
        <span @click="allSelect()">
          <img src="../../../assets/方形未选中.png"  v-show="isAllselect === false"  class="imgSelect" alt="">
          <img src="../../../assets/方形选中.png" v-show="isAllselect === true"    class="imgSelect"  alt="">
          全选
        </span>
      <button class="bottomBtn" @click="send()">确认</button>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'EmpowerList',
  data () {
    return {
      activeNames: [0],
      list: [],
      isAllselect: true,
      type: 0,
      Olist: []
    }
  },
  computed: {
    typeTitle: function () {
      if (this.type === 1) {
        document.title = '图文咨询'
        return '图文咨询'
      } else if (this.type === 2) {
        document.title = '视频咨询'
        return '视频咨询'
      } else if (this.type === 5) {
        document.title = '远程会诊'
        return '远程会诊'
      }
    }
  },
  mounted () {
    if (this.$route.query.type) {
      this.type = Number(this.$route.query.type)
    }
    let DATA = JSON.parse(sessionStorage.getItem('DATA'))
    if (DATA.Olist && DATA.Empowerlist) {
      // this.Olist = DATA.Olist
      this.list = DATA.Empowerlist
      this.isAllselect = DATA.isAllselect
    } else {
      this.getList()
    }
    $('.content').css({height: $(window).height() - $('.content').offset().top - $('.bottom').height() - 50 + 'px'})
  },
  methods: {
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },

    // 全选
    allSelect () {
      this.isAllselect = !this.isAllselect
      for (var i in this.list) {
        for (var k in this.list[i].oauths) {
          if (this.isAllselect === true) {
            this.list[i].oauths[k].oauth_type = 0
          } else {
            this.list[i].oauths[k].oauth_type = ''
          }
        }
      }
    },
    // 确认按钮
    send () {
      this.Olist = []
      for (var i in this.list) {
        for (var k in this.list[i].oauths) {
          let obj
          obj = {
            'oauth_type': this.list[i].oauths[k].oauth_type,
            'oauth_id': this.list[i].oauths[k].id
          }
          if (this.list[i].oauths[k].oauth_type !== '') {
          } else {
            obj.oauth_type = '-1'
          }
          this.Olist.push(obj)
        }
      }
      this.keep()
    },
    // 保存
    keep () {
      let second = JSON.parse(sessionStorage.getItem('SecondData'))
      let DATA = JSON.parse(sessionStorage.getItem('DATA'))
      DATA.Olist = this.Olist
      DATA.Empowerlist = this.list
      DATA.isAllselect = this.isAllselect

      second.Olist = this.Olist

      sessionStorage.setItem('DATA', JSON.stringify(DATA))
      sessionStorage.setItem('SecondData', JSON.stringify(second))
      this.back()
    },
    // 查看
    justLook (item) {
      if (item.oauth_type !== 0) {
        item.oauth_type = 0
      } else {
        item.oauth_type = ''
      }
      this.isAllselect = false
    },
    // 修改
    justUpdate (item) {
      if (Number(item.oauth_type) !== 1) {
        item.oauth_type = 1
      } else {
        item.oauth_type = ''
      }
    },
    labelChange () {
      // console.log(this.activeNames)
    },
    getList () {
      this.$http.listHealthOauth({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.list = res.data.data
            for (let i in this.list) {
              for (let k in this.list[i].oauths) {
                this.$set(this.list[i].oauths[k], 'oauth_type', 0)
              }
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(1){
  width: 25%;
}
.div:nth-child(2){
  width: 50%;
  display: flex;
  justify-content: center;
}
.div:nth-child(3){
  width: 25%;
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}

.divLabel{
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.selectDiv {
  display: flex;
  align-items: center;
}
.selectDiv span{
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.selectDiv span img{
  margin-right: 8px;
}
.imgSelect{
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.content{
  overflow: auto;
}
.bottom{
  width: 100%;
  min-height: 50px;
  position: fixed;
  bottom:50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*padding: 0 10px;*/
  box-sizing: border-box;
  font-size: 15px;
}
.bottom span{
  margin-left: 10px;
}
.bottomBtn{
  width: 250px;
  height: 50px;
  background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}

.bottom .allSelectDiv{
  height: 44px;
  justify-content: space-between;
}
.allSelectDiv span{
  display: flex;
  align-items: center;
}
.label  input{
  width: 100px;
}
.label span{
  display: flex;
  align-items: center;
}

.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.title{
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: white;
}
</style>
